<!DOCTYPE html>
<html>
    <head>
        <title>tooltip组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <style type="text/css">
            div.ct{
                padding: 20px;
                border: 1px solid #ccc;
                width: 600px;
            }
            .ct2 {
                padding: 30px;
                border: 1px solid #ccc;
            }
            .ct3{
                padding: 30px;
                border: 1px solid #ccc;
            }
            a{
                font-size: 13px;
                margin-left: 20px;
                background: #ccc;
                display: inline-block;
            }
        </style>
        <script>
            var str = '请输入';
            require(["tooltip/avalon.tooltip"], function() {
                vmodel = avalon.define("test", function(vm) {
                    vm.$qqOpt = {
                        "contentGetter": function(elem) {
                            if(elem.tagName.toLowerCase() == 'input' || elem.getAttribute("tp")) return str + str + str + str + str + str + str + str + str + str + str
                        }
                        , autohide: true
                        , track: true
                    }
                    vm.$skipArray = ["tooltip"]
                })
                avalon.scan()
            })
        </script>
    </head>
    <body>
<div ms-controller="test">
        <h1>鼠标跟随</h1>
        <div ms-widget="tooltip,ppo, $qqOpt" data-tooltip-delegate="true" data-tooltip-position="tr" class="ct">
            <div class="ct2">
                <div class="ct3">
                    <a tp="1" href="#">hover me~</a>
                </div>
                <a tp="1" href="#">hover me~</a>
            </div>
            <a tp="1" href="#">hover me~</a>
        </div>
        <pre ms-skip class="brush:html;gutter:false;toolbar:false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;tooltip组件&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;script src=&quot;../avalon.js&quot;&gt;&lt;/script&gt;
        
        &lt;style type=&quot;text/css&quot;&gt;
            body{
                padding-bottom: 400px;
            }
            div.ct{
                padding: 20px;
                border: 1px solid #ccc;
                width: 600px;
            }
            .ct2 {
                padding: 30px;
                border: 1px solid #ccc;
            }
            .ct3{
                padding: 30px;
                border: 1px solid #ccc;
            }
            a{
                font-size: 13px;
                margin-left: 20px;
                background: #ccc;
                display: inline-block;
            }
        &lt;/style&gt;
        &lt;script&gt;
            var str = '请输入';
            require([&quot;tooltip/avalon.tooltip&quot;], function() {
                vmodel = avalon.define(&quot;test&quot;, function(vm) {
                    vm.$qqOpt = {
                        &quot;contentGetter&quot;: function(elem) {
                            if(elem.tagName.toLowerCase() == 'input' || elem.getAttribute(&quot;tp&quot;)) return str + str + str + str + str + str + str + str + str + str + str
                        }
                        , autohide: true
                        , track: true
                    }
                    vm.$skipArray = [&quot;tooltip&quot;]
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body class=&quot;oni-helper-reset&quot;&gt;
&lt;div ms-controller=&quot;test&quot;&gt;
        &lt;h1&gt;鼠标跟随&lt;/h1&gt;
        &lt;div ms-widget=&quot;tooltip,ppo, $qqOpt&quot; data-tooltip-delegate=&quot;true&quot; data-tooltip-position=&quot;tr&quot; class=&quot;ct&quot;&gt;
            &lt;div class=&quot;ct2&quot;&gt;
                &lt;div class=&quot;ct3&quot;&gt;
                    &lt;a tp=&quot;1&quot; href=&quot;#&quot;&gt;hover me~&lt;/a&gt;
                &lt;/div&gt;
                &lt;a tp=&quot;1&quot; href=&quot;#&quot;&gt;hover me~&lt;/a&gt;
            &lt;/div&gt;
            &lt;a tp=&quot;1&quot; href=&quot;#&quot;&gt;hover me~&lt;/a&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
    </div>
</body>
</html>
